<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Padding - Cascading Style Sheets Properties</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
    <td rowspan=2><h1 class="pagetitle">padding</h1>
    <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
    [<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]<br></td>
    <td colspan=2 align=center><b class="alert">Other Padding Properties</b><br></td>
</tr>
<tr>
    <td><a href="paddingtop.htm">padding-top</a><br>
    <a href="paddingright.htm">padding-right</a><br></td>
    <td><a href="paddingbot.htm">padding-bottom</a><br>
    <a href="paddingleft.htm">padding-left</a><br></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Css</span> by <a 
href="../../../misc/email.htm">Brian Wilson</a> =</font><br>
</td></tr>
</table>
</center>

<div align="center">
<table cellpadding=5 cellspacing=0>
<tr>
    <td>&#160;&#160;<font size=2><a href="../../index.html">Main Index</a> |
        <a href="../../propindex/font.htm">Property Index</a> |
        <a href="../../supportkey/syntax.htm">CSS Support History</a> |
        <a href="../../../history/browsers.htm">Browser History</a></font>&#160;&#160;</td>
</tr>
</table>
</div>
<hr size=1 align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0 >
<tr>
    <th colspan=3 valign=bottom class="field"><big><u><b
        class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading">Default Value: </b><br></th>
    <td rowspan=6>&nbsp;&nbsp;</td>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading">Applicable Elements: </b><br></th>
    <td>ALL</td></tr>
<tr><th align=left><b class="l3heading">Inherit From Parent: </b><br></th>
    <td>No</td></tr>
<tr><th align=left><b class="l3heading">Applicable Media: </b><br></th>
    <td>Visual</td></tr>
<tr><th align=left><b class="l3heading">HTML Equivalent: </b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading">Official Docs: </b><br></th>
    <td><a href="http://www.w3.org/TR/REC-CSS1#padding">CSS1: Sect. 5.5.10</a><br>
        <a href="http://www.w3.org/TR/REC-CSS2/box.html#padding-properties">CSS2: Sect. 8.4</a>,
        <a href="http://www.w3.org/TR/CSS21/box.html#padding-properties">CSS2.1: Sect. 8.4</a></td></tr>
</table>
</td></tr>
</table>

<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>This is a shorthand property which allows an author to specify 'padding-top',
        'padding-right', 'padding-bottom', and 'padding-left' properties using a single
        property and value notation (the values are given in this order separated
        by spaces.) If one or more of the values are not present, the value for a
        missing side is taken from the opposite side that is present. If only one
        value is listed, it applies to all sides. The rendered surface of the padding
        area is taken from the 'background' property.
</dl>

<dl>
<dt><br><big><b class="mainheading">Allowed Values</b></big>
<dt><b class="subheading">inherit</b></dt>
<dt>[<b><i class="fs">CSS2</i></b>|<b class="s">CSS2.1</b>] 
    [<b><i class="fs">N6</i></b>|<b class="s">O7</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Explicitly sets the value of this property to that of the parent.</dd>

<dt><b class="subheading">[length]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Explicit</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to either an absolute measurement or a relative measurement based on the
        current element's font size.</dd>

<dt><b class="subheading">[percentage]</b></dt>
<dt>[<b><i class="fs">CSS1</i></b>|<b class="s">CSS2</b>|<b class="s">CSS2.1</b>] 
    [<b class="s">IE4B2</b>|<b><i class="fs">N4B3</i></b>|<b class="s">O3.5</b>|<b class="s">S1</b>]</dt>
    <dd><b class="l3heading">Type:</b> Calculated</dd>
    <dd><b class="l3heading">Description:</b><br>
        Refers to a percentage of the width of the current element's containing block.</dd>
</dl>

<dl>
<dt><big><b class="mainheading">Syntax</b></big>
    <dd><b class="selector">Selector</b> { <span class="property">padding:</span>
        <b class="alert">(</b>[length] <b class="alert">|</b>
        [percentage]<b class="alert">) {1,4}</b> }
</dl>

<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">Ext/Doc: <b class="selector">body</b> {
        <span class="property">padding:</span> 5px 5px 2px 25px }</div>
    <dd><div class="example">In-Line:&#160; &lt;<b class="tagname">body</b>
        <span class="tagattrib">STYLE</span>=&quot;<span class="property">padding:</span>
        5px 5px 2px 25px&quot;&gt;this is a test display document&lt;/<b
        class="tagname">body</b>&gt;</div>
</dl>

<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><b class="alert">Internet Explorer</b>
        <dl>
        <dd><b class="alert2">4.0:</b>
        <dd>- Of the various form field types, Padding properties are only applied to
            button widgets (Input Type=Submit|Reset|Button.)
        <dd>- Padding applied to TABLE elements applies to the individual cells, not
            the table structure.
        <dd><b class="alert2">4.0+:</b>
        <dd>- Using Padding properties on a form button widget
            (Input Type=Submit|Reset|Button) applies the padding inside the button,
            not outside the button.
        <dd>- Padding properties do not apply to images
        <dd><b class="alert2">4.0-5.0:</b>
        <dd>- This property does not apply to inline elements.
        <dd><b class="alert2">5.0+:</b>
        <dd>- Padding applied to TABLE elements has <em>SOME</em> effect on cell
            content, but it is difficult to identify patterns to the behavior.
        <dd>- Padding now applies to text entry fields as well (Input
            Type="File|Text", Textarea), but as with button widgets, the padding
            is applied inside the field, not outside it.
        <dd><b class="alert2">5.5+:</b>
        <dd>- Beginning in 5.5 Beta 1, this property now applies to inline elements.
        </dl>
    <li><b class="alert">Netscape</b>
        <dl>
        <dd><b class="alert2">4.x:</b>
        <dd>- Positive padding values on inline elements appears to be very broken
            (negative or zero values are ignored.) I am sure there is probably a rational
            heuristic at work deciding what to do with the content, but in most cases the
            result is badly overlapping content. Stay away from this in Netscape.
        <dd>- Applying padding values to a replaced object (my test was an IMG element)
            really messes with document content flow.
        <dd>- Padding applied to individual List Items (LI) causes the list marker
            to NOT be rendered. If applied to a list structure (OL, UL, etc) the list
            markers are rendered.
        <dd>- Padding applied to TABLE elements applies to the individual cells, not the
            table structure.
        <dd>- Some situations involving padding properties can cause extra line feeds when printing.
        </dl>
    <li><b class="alert">Opera</b>
        <dl>
        <dd><b class="alert2">3.5:</b>
        <dd>- Padding is not applied to replaced items (IMG, form field widgets, etc.)
        <dd>- Padding-top and Padding-bottom values are ignored for inline elements
            (EM, STRONG, SPAN, etc.) Only Padding-left and Padding-right values
            are honored for spacing. The surface color for the padding, however,
            <em>DOES</em> cover any specified Padding-top and Padding-bottom values.
        <dd>- Padding applied to TABLE elements has odd effects. No effect on TD/TH.
        </dl>
</ul>

<br><br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff....</a>
<br>

</BODY>
</HTML>